<template>
    <el-card class="box-card">
        <template #header>
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/tool/account' }">公众号列表</el-breadcrumb-item>
                <el-breadcrumb-item>公众号 {{name}} 管理</el-breadcrumb-item>
            </el-breadcrumb>
        </template>

        <el-tabs
                v-model="activeName"
                type="card"
                class="public_tabs"
                @tab-click="handleClick"
        >
            <el-tab-pane label="用户管理" name="first">
              <accountuser/>
            </el-tab-pane>
            <el-tab-pane label="群发消息" name="second">
              <groupsend/>
            </el-tab-pane>
            <el-tab-pane label="素材管理" name="third">
               <template #default>
                    <sucai/>
                </template>
            </el-tab-pane>
            <el-tab-pane label="实时消息" name="fourth">实时消息</el-tab-pane>
            <el-tab-pane label="详情设置" name="five">详情设置</el-tab-pane>
            <el-tab-pane label="菜单设置" name="six">
             <template #default>
                  <draggableMenu></draggableMenu>
              </template>
            </el-tab-pane>

        </el-tabs>
    </el-card>


</template>

<script setup name="publicAccountManager" lang="ts">
    import { ArrowRight } from '@element-plus/icons-vue'
    import { defineAsyncComponent } from 'vue'
    import { ref } from 'vue'
    import type { TabsPaneContext } from 'element-plus'
    import {useRoute} from "vue-router";
    import usePublicAccount from '/@/stores/modules/publicaccount'
    // import DraggableMenu from "./draggableMenu.vue";

    const currentName = ref('');
    const publicAccount = usePublicAccount();
    const route = useRoute();
    const activeName = ref('six');
    activeName.value = publicAccount.activeName;
    const name = publicAccount.selectAccount;
    const accountuser = defineAsyncComponent(() => import('/@/views/publicaccount/hmPublicAccount/accountuser.vue'));
    const groupsend = defineAsyncComponent(() => import('/@/views/publicaccount/hmPublicAccount/groupsend.vue'));
    const sucai = defineAsyncComponent(() => import('/@/views/publicaccount/hmPublicAccount/sucai.vue'));
    const draggableMenu = defineAsyncComponent(() => import('/@/views/publicaccount/hmPublicAccount/draggableMenu.vue'));

    const handleClick = (tab: TabsPaneContext, event: Event) => {
         publicAccount.setActiveName(activeName.value);
    }
</script>

<style scoped lang="scss">
    .box-card {
        width: 100%;
    }

    .public_tabs > .el-tabs__content {
        padding: 32px;
        color: #6b778c;
        font-size: 32px;
        font-weight: 600;
        width: 300px;
    }
</style>
